<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin:0px;
        padding:0px;
    }
    body{
        display:flex;
        background-color:lightpink;
        flex-wrap: wrap;
    }
    
    #BOX {
        display: flex;
        flex:1;
        flex-wrap:wrap;
        min-height: 100vh;
        align-items: center;
        justify-content: space-around;
    }
    #BOX p{
        border: .4rem solid black;
        border-radius: .5rem;
        min-width:114px;
        font-size: 1.5rem;
        padding: 1rem .5rem;
        transition: all .07s ease;
        text-align: center;
        color: white;
        background: rgba(0,0,0,0.4);
        text-shadow: 0 0 .5rem black;
    }
    span{
        font-size:30px;
        color:white;
    }
    .playing{
        transform: scale(1.1);
        border-color: #ffc600;
        box-shadow: 0 0 1rem #ffc600;
    }
</style>
<body>
    <div id='BOX'>
        <p data-key="65"><span>A</span><br>CLAP</p>
        <p data-key="83"><span>S</span><br>HINAT</p>
        <p data-key="68"><span>D</span><br>KICK</p>
        <p data-key="70"><span>F</span><br>OPENHAT</p>
        <p data-key="71"><span>G</span><br>BOOM</p>
        <p data-key="72"><span>H</span><br>AIDE</p>
        <p data-key="74"><span>J</span><br>SNARE</p>
        <p data-key="75"><span>K</span><br>TOM</p>
        <p data-key="76"><span>L</span><br>TINK</p>
    </div>


    <audio data-key="65" src="sounds/clap.wav"></audio>
    <audio data-key="83" src="sounds/hihat.wav"></audio>
    <audio data-key="68" src="sounds/kick.wav"></audio>
    <audio data-key="70" src="sounds/openhat.wav"></audio>
    <audio data-key="71" src="sounds/boom.wav"></audio>
    <audio data-key="72" src="sounds/ride.wav"></audio>
    <audio data-key="74" src="sounds/snare.wav"></audio>
    <audio data-key="75" src="sounds/tom.wav"></audio>
    <audio data-key="76" src="sounds/tink.wav"></audio>

    <script>

        const keys = document.querySelectorAll('p')
        keys.forEach(key => {key.addEventListener('transitionend',() => {key.classList.remove('playing')})})
        window.addEventListener('keydown',(event) =>{
            let keys = [65,83,68,70,71,72,74,75,76]
            if(!keys.includes(event.keyCode)){return}
            let p = document.querySelector(`p[data-key="${event.keyCode}"]`)
            let audio = document.querySelector(`audio[data-key="${event.keyCode}"]`)
            p.classList.add('playing')
            audio.currentTime = 0
            audio.play()
        })


    </script>
</body>

</html>